import React from 'react';
import G2 from '@antv/g2';

/**
 * 图表组件.使用G2.
 * https://www.yuque.com/ant-design/course/dk8xsp
 */
export class G2SampleChart extends React.Component<any,any> {
    containerRef = React.createRef() as React.RefObject<any>;
    chart:G2.Chart;

    constructor(props:any){
        super(props);
        
    }

    componentDidMount(){
        // G2 初始化图形代码
        this.chart = new G2.Chart({
            // this.containerRef.current 即为引用
            container:this.containerRef.current,
            width:450,
            height:300,
        })

        this.refreshChart();
    }

    //由于refreshChart()方法不是React的render,因此组件props和state发生变化时,不会自动执行刷新.需要借助React的componentDidUpdate;
    componentDidUpdate(prevProps){
        if(prevProps.data !== this.props.data){
            this.refreshChart();
        }
    }

    //当前组件卸载时,手动销毁chart资源.
    componentWillUnmount(){
        if(this.chart){
            this.chart.destroy();
        }
    }

    refreshChart = () => {
        // console.log('this.props.data',this.props.data);
        // 接收 data 属性作为数据源
        this.chart.source(this.props.data);
        // 此处为硬编码，配置源自 G2 官方示例： https://github.com/antvis/g2
        // 实际开发中需要封装，推荐直接使用 BizCharts。
        this.chart.interval().position('genre*sold').color('genre');
        this.chart.render();
      };

    render() {
        return (<div ref={this.containerRef}/>);
    }
}
